<template>
  <div class="case-application">
    <!-- 步骤导航：条件渲染当前步骤 -->
    <div class="steps">
      <button
          v-for="(step, index) in steps"
          :key="index"
          @click="currentStep = index"
          :class="{ active: currentStep === index }"
      >
        步骤{{ index + 1 }}: {{ step.title }}
      </button>
    </div>

    <!-- 步骤1：案件类型选择 - 条件渲染 -->
    <div v-if="currentStep === 0" class="step-content">
      <h3>选择案件类型</h3>
      <ul>
        <li
            v-for="type in caseTypes"
            :key="type.id"
            @click="selectCaseType(type.id)"
            :class="{ selected: caseData.type === type.id }"
        >
          {{ type.name }}
        </li>
      </ul>
    </div>

    <!-- 步骤2：案情描述 - 事件处理输入 -->
    <div v-if="currentStep === 1" class="step-content">
      <h3>描述您的案情</h3>
      <textarea
          rows="8"
          style="width: 100%;"
          v-model="caseData.description"
          @input="handleDescriptionInput"
          placeholder="详细描述案情..."
      ></textarea>
    </div>

    <!-- 步骤3：材料上传 - 列表渲染 + 事件处理 -->
    <div v-if="currentStep === 2" class="step-content">
      <h3>上传证据材料</h3>
      <input
          type="file"
          @change="handleFileUpload"
          multiple
          accept="image/*, .pdf"
      />
      <ul class="file-list">
        <li v-for="(file, index) in caseData.files" :key="file.id">
          <span>{{ file.name }}</span>
          <span v-if="file.status === 'pending'" class="status">待审核</span>
          <span v-if="file.status === 'approved'" class="status approved">已通过</span>
          <button @click="removeFile(index)">删除</button>
        </li>
      </ul>
    </div>

    <!-- 控制按钮：事件处理导航 -->
    <div class="controls">
      <button v-if="currentStep > 0" @click="prevStep">上一步</button>
      <button v-if="currentStep < steps.length - 1" @click="nextStep">下一步</button>
      <button v-if="currentStep === steps.length - 1" @click="submitCase">提交申请</button>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue';

// 步骤数据：条件渲染基础
const steps = ref([
  {title: '案件类型',},
  {title: '案情描述',},
  {title: '材料上传',}
]);
const currentStep = ref(0);

// 案件数据模型
const caseData = reactive({
  type: null,       // 类型ID（条件渲染依据）
  description: '',  // 案情描述（事件处理更新）
  files: []         // 文件列表（列表渲染源）
});

// 案件类型列表：列表渲染数据源
const caseTypes = ref([
  {id: 'civil', name: '民事案件'},
  {id: 'criminal', name: '刑事案件'},
  {id: 'administrative', name: '行政案件'}
]);

// 事件处理函数
const selectCaseType = (typeId) => {
  caseData.type = typeId; // 更新类型，驱动条件渲染
};

const handleDescriptionInput = (event) => {
  console.log('案情更新：', caseData.description); // 实时处理输入
};

const handleFileUpload = (event) => {
  const files = event.target.files;
  for (let i = 0; i < files.length; i++) {
    caseData.files.push({
      id: Date.now() + i,
      name: files[i].name,
      status: 'pending' // 初始状态（条件渲染依据）
    });
  }
};

const removeFile = (index) => {
  caseData.files.splice(index, 1); // 更新列表，触发重新渲染
};

const nextStep = () => {
  if (currentStep.value < steps.value.length - 1) {
    currentStep.value++;
  }
};

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

const submitCase = () => {
  alert('案件提交成功！数据：' + JSON.stringify(caseData));
  // 实际项目中调用API提交数据
};
</script>

<style scoped>
.case-application {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.steps {
  display: flex;
  margin-bottom: 20px;
}

.steps button {
  flex: 1;
  padding: 10px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
}

.steps button.active {
  background: #42b983;
  color: white;
}

.step-content {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  padding: 10px;
  margin: 5px 0;
  background: #f9f9f9;
  cursor: pointer;
}

ul li.selected {
  background: #e3f2fd;
}

.file-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status {
  color: #e74c3c;
  font-size: 0.8em;
}

.status.approved {
  color: #42b983;
}

.controls {
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 15px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>